

<!DOCTYPE html>
<html>

<head>
   
    
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--360浏览器优先以webkit内核解析-->


<title>费用申请明细</title>
    <script src="__STATIC__/layout/js/jquery.min.js"></script>
<link rel="shortcut icon" href="__STATIC__/layout/favicon.ico">
    <script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
<link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="__STATIC__/layout/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<!--<link href="__STATIC__/layout/css/animate.css" rel="stylesheet">-->
<!--<link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">-->
<!--<link href="__STATIC__/layout/css/channel.css?v=4.1.0" rel="stylesheet">-->
<!--&lt;!&ndash; Sweet Alert &ndash;&gt;-->

<!--<link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">-->
<!--<link href="__STATIC__/layout/js/plugins/select/bootstrap-select.css" rel="stylesheet">-->


    <!--<link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">-->
    <!--<link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">-->
    <link href="__STATIC__/xds/js/select2/css/select2.css" rel="stylesheet" />
    <script src="__STATIC__/xds/js/select2/js/select2.js"></script>
    <style>
        #form1 p{
            line-height: 20px;
            padding: 4px;
        }
        .titleImg{
            width: 20px;
            height: 20px;
            margin-right: 8px;
            display: inline-block;
            vertical-align: middle;
        }
        .table{
            margin-bottom: 10px;
        }
          .handup{
            color: #a6e1fc;
            display: inline-block;
            padding-left: 10px;
            cursor: pointer;
        }
         .btn-white.active{
            color: #fff;
            background-color: #337ab7;
        }
        .bootstrap-select{
            height: 36px;
            border-radius: 6px;
        }
        .bootstrap-select .btn-default {
             border-radius: 6px;
             background-color: #fff; 
             border-color: #c2c2c2; 
             color: #333; 
            }
        .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default{
            border-radius: 6px;
             background-color: #fff; 
             border-color: #c2c2c2; 
             color: #333; 
         }
    </style>

</head>

<body class="white-bg" style="padding: 3px;font-size: 13px">
    <div class="page-heade">
       <h2 class="title_color text-center">费用申请明细</h2>
    </div>
    <form action="" class="form-inline" id="form1">
        <p><img  class="titleImg" src="__STATIC__/layout/img/activityXiTong.png" alt=""><b>基本信息</b></p>
        <table class="table table-bordered bud_hei">
            <thead>
                <tr class="info">
                    <th class="text-center">活动期间</th>
                    <th class="text-center">预算期间</th>
                    <th class="text-center">预计核销日期</th>
                    <th class="text-center">活动简述及目的</th>
                    <th class="text-center">所属专项方案</th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-center">
                    <td><input type="text" id="actiontime" class="form-control layer-icon" style="width: 60%" placeholder="开始时间 至 结束时间">&nbsp;&nbsp;<span class="text-danger" id="actionText"></span></td>
                    <td><input type="text" id="yusuantime" class="form-control" style="width: 80%" placeholder="开始时间 至 结束时间"></td>
                    <td><input type="text" id="yujihexiaotime" class="form-control"></td>
                    <td><input type="text" class="form-control" style="width: 95%"></td>
                    <td>无</td>
                </tr>
            </tbody>
        </table>
         <p><img  class="titleImg" src="__STATIC__/layout/img/activityXiTong.png" alt=""><b>费用详情</b></p>
        <table class="table table-bordered bud_hei">
            <thead>
                <tr class="info">
                    <th class="text-center">费用类型</th>
                    <th class="text-center">支付方式</th>
                    <th class="text-center">未税总额</th>
                    <th class="text-center">收款方</th>
                    <th class="text-center">成本中心</th>
                    <th class="text-center">费用说明</th>
                    <th class="text-center">
                        <button class="btn btn-success " type="button"><i class="fa fa-plus-square"></i>&nbsp;&nbsp;<span class="bold">添加</span>
                        </button>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                       <div class="input-group form-group" style="display: inline-block;" id="selectDivangency1">
                                        <input type="text" class="form-control" id="testNoBtn2">
                                        <div class="input-group-btn">
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                  </div>
                  <span class="fa fa-hand-o-up handup fa-2x"></span>
                    </td>
                    <td>
                        <select name="" id="" class="form-control"  disabled="true">
                            <option value="0">请选择</option>
                        </select>
                    </td>
                    <td>
                       <div class="input-group">
                        <input type="text" class="form-control" aria-label="RMB" style="width: 60px;height: 30px">
                         <span class="input-group-addon">元</span>
                        </div>
                    </td>
                    <td>
                      <div class="btn-group">
                    <label class="btn btn-white" style="position: relative;">
                         <input type="radio" name="options" id="agency" autocomplete="off" style="opacity: 0;position: absolute;">经销商
                     </label>
                     <label class="btn btn-white active" style="position: relative;">
                         <input type="radio" name="options" id="gys" autocomplete="off" checked style="opacity: 0;position: absolute;"> 供应商
                     </label>
                 </div><br><br>
                    <input type="text" class="form-control" name="" id="gysInput">
                    </td>
                    <td>
                        <div class="form-group" style="width: 60%">
                            <p><span>东南大区</span>，100%</p>
                            <p><span>东南大区</span>，100%</p>
                            <p><span>东南大区</span>，100%</p>
                        </div><a href="javascript:;" data-toggle="modal" data-target="#myModal">
                        <span class="fa fa-eyedropper" style="cursor: pointer;vertical-align: bottom;margin-bottom: 8px" data-toggle="tooltip" data-placement="right" title="修改成本中心"></span></a>
                    </td>
                    <td><input type="text" class="form-control" id="" style="width: 100%" placeholder="简要说明费用构成"></td>
                    <td>
                        <a class="btn btn-white btn-bitbucket">
                            <i class="fa fa-trash-o"></i> 删除
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
         <p style=""><img  class="titleImg" src="__STATIC__/layout/img/activityXiTong.png" alt=""><b>客户详情</b>&nbsp;&nbsp;&nbsp;
                    <label class="btn btn-white" style="position: relative;">
                         <input type="radio" name="options1" id="angencyr" autocomplete="off" style="opacity: 0;position: absolute;">经销商
                     </label>
                     <label class="btn btn-white active" style="position: relative;">
                         <input type="radio" name="options1" id="sysr" autocomplete="off" checked style="opacity: 0;position: absolute;"> 系统
                     </label>
                      <label class="btn btn-white" style="position: relative;">
                         <input type="radio" name="options1" id="netr" autocomplete="off" checked style="opacity: 0;position: absolute;"> 网点
                     </label>
         </p>
        <table class="table table-bordered bud_hei" id="angencyTable" style="display: none;">
            <tr>
                <td><b>长沙市骏鸿实业有限公司</b></td>
            </tr>
        </table>
         <table class="table table-bordered bud_hei" id="netTable" style="display: none;">
            <tr>
                <td>
                     <div class="input-group form-group" style="display: inline-block;" id="selectDivangency1">
                                        <input type="text" class="form-control" id="testNoBtn2">
                                        <div class="input-group-btn">
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                  </div>
                  <span class="fa fa-hand-o-up handup fa-2x"></span>
                </td>
            </tr>
        </table>
        <table class="table table-bordered bud_hei" id="sysTable" >
            <thead>
                <tr class="info">
                    <th class="text-center">系统</th>
                    <th class="text-center">费用占比</th>
                    <th class="text-center">预计投放网点数</th>
                    <th class="text-center">
                        <button class="btn btn-success " type="button"><i class="fa fa-plus-square"></i>&nbsp;&nbsp;<span class="bold">添加</span>
                        </button>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-center">
                    <td>
                      <div class="input-group form-group" style="display: inline-block;" id="selectDivangency1">
                                        <input type="text" class="form-control" id="testNoBtn2">
                                        <div class="input-group-btn">
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                  </div>
                  <span class="fa fa-hand-o-up handup fa-2x"></span>
                    </td>
                    <td> 
                         <div class="input-group">
                        <input type="text" class="form-control" aria-label="" style="width: 60px;height: 30px">
                         <span class="input-group-addon">%</span>
                        </div>   
                    </td>
                     <td> 
                         <div class="input-group">
                        <input type="text" class="form-control" aria-label="" style="width: 60px;height: 30px">
                         <span class="input-group-addon">家</span>
                        </div>   
                    </td>
                    <td>
                         <a class="btn btn-white btn-bitbucket">
                            <i class="fa fa-trash-o"></i> 删除
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
         <p><img  class="titleImg" src="__STATIC__/layout/img/activityXiTong.png" alt=""><b>产品详情</b>&nbsp;&nbsp;&nbsp;
             <label class="btn btn-white active" style="position: relative;">
                         <input type="radio" name="option" id="brand" autocomplete="off" style="opacity: 0;position: absolute;" onclick="showTable($(this))">品牌
                     </label>
                     <label class="btn btn-white" style="position: relative;">
                         <input type="radio" name="option" id="pinlei" autocomplete="off" checked style="opacity: 0;position: absolute;"  onclick="showTable($(this))"> 品类
                     </label>
                      <label class="btn btn-white" style="position: relative;">
                         <input type="radio" name="option" id="list" autocomplete="off" checked style="opacity: 0;position: absolute;"  onclick="showTable($(this))"> 系列
                     </label>
                      <label class="btn btn-white" style="position: relative;">
                         <input type="radio" name="option" id="sku" autocomplete="off" checked style="opacity: 0;position: absolute;"  onclick="showTable($(this))"> SKU
                     </label>
                       <label class="btn btn-white" style="position: relative;">
                         <input type="radio" name="option" id="danpin" autocomplete="off" checked style="opacity: 0;position: absolute;"> 单品
                     </label>
                     <i id="proText">注：产品费用占比加起来必须等于100%,如果不填费用占比则平摊</i>
         </p>
        <table class="table table-bordered bud_hei" id="proTable">
            <thead>
                <tr class="info">
                    <th class="text-center">产品</th>
                    <th class="text-center">费用占比</th>
                    <th class="text-center">产品说明</th>
                    <th class="text-center"> <button class="btn btn-success " type="button"><i class="fa fa-plus-square"></i>&nbsp;&nbsp;<span class="bold">添加</span>
                        </button></th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-center">
                    <td>
                        <div class="input-group form-group" style="display: inline-block;" id="selectDivangency1">
                                        <input type="text" class="form-control" id="testNoBtn2">
                                        <div class="input-group-btn">
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                        </div>
                         <span class="fa fa-hand-o-up handup fa-2x"></span>
                    </td>
                    <td>
                         <div class="input-group">
                        <input type="text" class="form-control" aria-label="" style="width: 60px;height: 30px">
                         <span class="input-group-addon">%</span>
                        </div>
                    </td>
                    <td>
                        <input type="text" class="form-control" name="" id="" placeholder="简要说明产品">
                    </td>
                    <td>
                     <a class="btn btn-white btn-bitbucket">
                            <i class="fa fa-trash-o"></i> 删除
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
         <table class="table table-bordered bud_hei" id="danpinTable" style="display: none;">
            <thead>
                <tr class="info">
                    <th class="text-center">产品</th>
                    <th class="text-center">产品说明</th>
                    <th class="text-center"> <button class="btn btn-success " type="button"><i class="fa fa-plus-square"></i>&nbsp;&nbsp;<span class="bold">添加</span>
                        </button></th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-center">
                    <td>
                        <div class="input-group form-group" style="display: inline-block;" id="selectDivangency1">
                                        <input type="text" class="form-control" id="testNoBtn2">
                                        <div class="input-group-btn">
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                        </div>
                         <span class="fa fa-hand-o-up handup fa-2x"></span>
                    </td>
                    <td>
                        <input type="text" class="form-control" name="" id="" placeholder="简要说明产品">
                    </td>
                    <td>
                     <a class="btn btn-white btn-bitbucket">
                            <i class="fa fa-trash-o"></i> 删除
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
        <p><img  class="titleImg" src="__STATIC__/layout/img/activityXiTong.png" alt=""><b>销量预测</b>&nbsp;&nbsp;&nbsp;
             <label class="btn btn-white active" style="position: relative;">
                         <input type="radio" name="sallr" id="shejisall" autocomplete="off" checked style="opacity: 0;position: absolute;"> 涉及销量
                     </label>
                      <label class="btn btn-white" style="position: relative;">
                         <input type="radio" name="sallr" id="noshejisall" autocomplete="off" checked style="opacity: 0;position: absolute;"> 不涉及销量
                     </label>
        </p>
        <table class="table table-bordered bud_hei" id="sallycTable">
            <thead>
                <tr class="info">
                    <th class="text-center">预计销售类型</th>
                    <th class="text-center">不做活动销售额</th>
                    <th class="text-center">做活动销售额</th>
                    <th class="text-center">增量销售额</th>
                    <th class="text-center">申请费用额合计</th>
                    <th class="text-center">预计费用率</th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-center">
                    <td>
                        <select name="" id="" class="form-control">
                            <option value="0">请选择</option>
                        </select>
                    </td>
                    <td>
                         <div class="input-group">
                        <input type="text" class="form-control" aria-label="RMB" style="width: 60px;height: 30px" >
                         <span class="input-group-addon">元</span>
                        </div>
                    </td>
                    <td>
                         <div class="input-group">
                        <input type="text" class="form-control" aria-label="RMB" style="width: 60px;height: 30px" >
                         <span class="input-group-addon">元</span>
                        </div>
                    </td>
                    <td></td>
                    <td class="text-right">2321.3元</td>
                    <td class="text-right"></td>
                </tr>
            </tbody>
        </table>
    </form>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="font-size: 16px">&times;</span></button>
        <h2 class="modal-title" id="gridSystemModalLabel">成本中心</h2>
      </div>
      <div class="modal-body" style="position: relative;height: 400px">
          <div class="control-group">


              <div class="input-group">
              <select class="selectpicker show-menu-arrow" id="multiples" >

              </select>
              </div>

            <script>
                $(document).ready(function() {
                    //$('.js-example-basic-single').select2();
                    $("#multiples").select2({
                        placeholder: "please select demo",
                        allowClear: true,
                        data: [{id: 10001, text: 'demoa'},
                            {id: 10002, text: 'demob'},
                            {id: 10003, text: 'democ'}]
                    });



                });
            </script>





              </div>
          </div>

              <div class="padding-10">
                <p>1.</p>
              </div>
        <p class="alert alert-warning" style="position: absolute;bottom: 0;left: 5px;padding: 5px;width: 80%;box-sizing: border-box;">
            占比加起来必须等于100%
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
<!-- 全局js -->

<!--<script src="__STATIC__/layout/js/contabs_sub.js"></script>-->

<!--&lt;!&ndash; Sweet alert &ndash;&gt;-->
<!--<script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>-->
 <!--<script src="__STATIC__/layout/js/plugins/laydate/laydate.js"></script>-->
  <!--<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>-->
   <!--&lt;!&ndash;<script type="text/javascript" src="__STATIC__/layout/js/plugins/select/bootstrap-select.js"></script> &ndash;&gt;-->
    <!--&lt;!&ndash; Chosen &ndash;&gt;-->
    <!--<script src="__STATIC__/layout/js/plugins/chosen/chosen.jquery.js"></script>-->

<script>
    $(function () {
        $('body').on('click','input[type=text]',function () {
            this.select()
        })
    })
</script>
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
<script>
  $(function () {
            $('[data-toggle="tooltip"]').tooltip()
    })
   laydate.render({
    elem: '#actiontime',
    type: 'date',
    range: '至',
    done: function(value, date){
    var thisVal = value.split("至");
    var sta_str = new Date(thisVal[0]);
    var end_str = new Date(thisVal[1]);
    var num = (end_str-sta_str)/(1000*3600*24)
    $("#actionText").text(num+"天");
  }
    });
    laydate.render({
    elem: '#yusuantime',
    type: 'date',
    range: '至',
    });
     laydate.render({
    elem: '#yujihexiaotime',
    type: 'date'
    });
    

    sousuo($("#testNoBtn2"));
function sousuo(obj){
 var testBsSuggest = obj.bsSuggest({
            //url: "/rest/sys/getuserlist?keyword=",
         
            /*effectiveFields: ["userName", "shortAccount"],
            searchFields: [ "shortAccount"],
            effectiveFieldsAlias:{userName: "姓名"},*/
            showBtn: false,
            idField: "userId",
            keyField: "userName"
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword) {
            console.log('onSetSelectValue: ', keyword);
        }).on('onUnsetSelectValue', function (e) {
            console.log("onUnsetSelectValue");
        });

}

  $("#selectDivangency1").css("width","60%");


  /*经销商or供应商*/
  $("#agency").click(function(){
        // console.log(1)
     $(this).parent('label').siblings().removeClass('active')
     $(this).parent('label').addClass('active')
     $("#gysInput").hide();
})
$("#gys").click(function(){
     $(this).parent('label').siblings().removeClass('active')
     $(this).parent('label').addClass('active');
      $("#gysInput").show();
})

/*经销商or系统or网点*/
$("#angencyr").click(function(){
        // console.log(1)
     $(this).parent('label').siblings('label').removeClass('active')
     $(this).parent('label').addClass('active')
     $("#angencyTable").show();
     $("#sysTable").hide();
     $("#netTable").hide();
})
$("#sysr").click(function(){
        // console.log(1)
     $(this).parent('label').siblings('label').removeClass('active');
     $(this).parent('label').addClass('active');
     $("#angencyTable").hide();
     $("#sysTable").show();
     $("#netTable").hide();
     
})
$("#netr").click(function(){
        // console.log(1)
     $(this).parent('label').siblings('label').removeClass('active')
     $(this).parent('label').addClass('active')
     $("#angencyTable").hide();
     $("#sysTable").hide();
     $("#netTable").show();
})



$("#danpin").click(function(){
     $(this).parent('label').siblings('label').removeClass('active')
     $(this).parent('label').addClass('active');
     $("#proTable").hide();
     $("#danpinTable").show();
     $("#proText").text("注：如选择单品类，则各单品费用将会平摊，如不希望平摊，请填写多次明细")
})


function showTable(obj){
    obj.parent('label').siblings('label').removeClass('active')
    obj.parent('label').addClass('active');
     $("#proTable").show();
     $("#danpinTable").hide();
     $("#proText").text("注：产品费用占比加起来必须等于100%,如果不填费用占比则平摊");
}


/*销量预测*/
$("#shejisall").click(function(){
     $(this).parent('label').siblings('label').removeClass('active')
     $(this).parent('label').addClass('active');
     $("#sallycTable tbody tr td").find('input').attr('disabled',false);
     $("#sallycTable tbody tr td").find('select').attr('disabled',false);
})
$("#noshejisall").click(function(){
    $(this).parent('label').siblings('label').removeClass('active')
     $(this).parent('label').addClass('active');
     $("#sallycTable tbody tr td").find('input').attr('disabled',true);
     $("#sallycTable tbody tr td").find('select').attr('disabled',true);
})

</script>

</body>

</html>